import classNames from 'classnames'
import './index.scss'
import { useMemo, useState } from 'react'
import { billTypeToName } from '@/constants'
import Icon from '@/components/Icon'

// 日账单组件
const DailyBill = ({ date, data }) => {
  const [show, setShow] = useState(false)
  // 对选择的日期做一下收支计算
  const dayResult = useMemo(() => {
    const pay = data.filter((item) => item.type === 'pay').reduce((total, current) => total + current.money, 0)
    const income = data.filter((item) => item.type === 'income').reduce((total, current) => total + current.money, 0)
    return {
      pay,
      income,
      total: income + pay
    }
  }, [data])
  return (
    <div className={classNames('dailyBill')}>
      <div className="header">
        <div className="dateIcon">
          <span className="date">{date}</span>
          <span
            className={classNames('arrow', show && 'expand')}
            onClick={() => {
              setShow(!show)
            }}
          ></span>
        </div>
        <div className="oneLineOverview">
          <div className="pay">
            <span className="type">支出</span>
            <span className="money">{dayResult.pay.toFixed(2)}</span>
          </div>
          <div className="income">
            <span className="type">收入</span>
            <span className="money">{dayResult.income.toFixed(2)}</span>
          </div>
          <div className="balance">
            <span className="money">{dayResult.total.toFixed(2)}</span>
            <span className="type">结余</span>
          </div>
        </div>
      </div>
      {/* 单日列表 */}
      {show && (
        <div className="billList">
          {data.map((item) => (
            <div className="bill" key={item.id}>
              <Icon type={item.useFor}></Icon>
              <div className="detail">
                <div className="billType">{billTypeToName[item.useFor]}</div>
              </div>
              <div className={classNames('money', item.type)}>{item.money.toFixed(2)}</div>
            </div>
          ))}
        </div>
      )}
    </div>
  )
}
export default DailyBill
